<template>
    <div class="sort_tool">
        <ul class="sort_tool_list">
            <li class="sort_tool_item" :class="{active:activeClass == index}" v-for="(item,index) in sortToolsList" @click="sortDatas(item,index)" :key="index" >
                <div class="sort_tool_btn">
                    <div>
                        <span>{{item.text.slice(0,item.text.length/2)}}</span>
                        <br />
                        <span>{{item.text.slice(item.text.length/2)}}</span>
                    </div>
                    <p v-if="item.isSort">
                        <span :class="{active:activeClass == index && item.orderSort}">▲</span>
                        <br />
                        <span :class="{active:activeClass == index && !item.orderSort}">▼</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
// import { staffers,subordinateStaffers } from "@/request/api.js";
export default {
    name:'SortData',
    data(){
        return {
            order_type:'desc',
        }
    },
    props:{
        activeClass:{
            type:Number,
            default:2
        },
        sortToolsList:{
            type:Array,
            default:()=>[]
        }
    },
    methods:{
        //列表排序
        sortDatas(item,index) {
            this.activeClass = index; 
            item.orderSort = !item.orderSort;
            if (item.orderSort) {
                this.order_type = 'asc'; //升序
            } else {
                this.order_type = 'desc'; //降序
            }
            let data = {};
            data.order = item.order;
            data.order_type = this.order_type;
            if (item.order) {
                this.$emit('sortTable',data);
            //     if(this.fromPage == 'subordinates'){
            //         staffers({
            //             token:this.$store.state.token,
            //             // fd_sta_name: this.searchValue,
            //             order:item.order,
            //             order_type:this.order_type,
            //             organize_id:'',
            //             page: 1,
            //             page_num: 10
            //         }).then(res=>{
            //             let data = {};
            //             let list = res.data;
            //             data.data = list.data;
            //             data.order = item.order;
            //             data.order_type = this.order_type;
            //             this.$emit('sortTable',data);
            //         }).catch(error=>{
            //             console.log(error)
            //         });
            //     }else if(this.fromPage == 'performanceTabs'){
            //         subordinateStaffers({
            //             token:this.$store.state.token,
            //             // fd_sta_name: this.searchValue,
            //             order:item.order,
            //             order_type:this.order_type,
            //             organize_id:'',
            //             page: 1,
            //             page_num: 10
            //         }).then(res=>{
            //             let data = {};
            //             let list = res.data;
            //             data.data = list.staffers;
            //             data.order = item.order;
            //             data.order_type = this.order_type;
            //             this.$emit('sortTable',data);
            //         }).catch(error=>{
            //             console.log(error)
            //         });
            //     }  
            }
        },
    }
}
</script>
<style lang="less" scoped>
    .sort_tool{
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        line-height: 44px;
        background: #fff;
        border-bottom: 2px solid #f7f7f7;
        .sort_tool_list {
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
            height: 44px;
            line-height: 44px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            text-align: center;
            color: #161618;
            background: #fff;
            .sort_tool_item {
                height: 100%;
                margin-right: 15px;
                box-sizing: border-box;
                .sort_tool_btn {
                    height: 44px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    div, p {
                        max-width: 85px;
                        line-height: 15px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    p {
                        margin-left: 5px;
                        span { color: #636466;}
                        .active { color: #ff661a; }
                    }
                }
            }
            .active { color: #ff661a;}
            .sort_tool_item:last-child {
                margin-right: 0;
            }
        }
    }
</style>